<template>
  <div class="main">
  	<div class="module">
  		<div class="header">
  			<div class="search">
  				<a href="#">TCL</a>
  				<div class="search-box">
  					<span class="iky-search">
  						<van-icon name="search" />
  					</span>
  					<input type="text" placeholder="领券立减">
  				</div>
  			</div>
  			<div class="swiper">
  				<van-swipe class="my-swipe" :autoplay="3000">
  					<van-swipe-item>
  						<img :src="swiper" class="img">
  					</van-swipe-item>
  					<van-swipe-item>
  						<img :src="swiper1" class="img">
  					</van-swipe-item>
  				</van-swipe>
  			</div>
  		</div>
  		<div class="recommend-category">
  			<div class="con br">
  				<van-grid :column-num="4" :border="false" icon-size="1.34rem">
  					<van-grid-item v-for="item in value" :key="item.id" :text="item.text" :icon="item.src" class="menu-icon"/>
  				</van-grid>
  			</div>
  		</div>
  	</div>
  </div>
</template>

<script>
export default {
	data(){
		return {
			swiper:require("../assets/home/1.jpg"),
			swiper1:require("../assets/home/2.jpg"),
			value:[
				{src:require('../assets/home/3.jpg'),text:'XESS智屏'},
				{src:require('../assets/home/4.jpg'),text:'合伙人'},
				{src:require('../assets/home/5.jpg'),text:'空调'},
				{src:require('../assets/home/6.jpg'),text:'电视'},
				{src:require('../assets/home/7.jpg'),text:'冰箱'},
				{src:require('../assets/home/8.jpg'),text:'洗衣机'},
				{src:require('../assets/home/9.jpg'),text:'厨卫'},
				{src:require('../assets/home/10.jpg'),text:'智能硬件'},
			],
		}
	}
}
</script>

<style scoped>
.main{
	background-color: #f5f5f5;
}
.header{
	height: 6.799706rem;
	position: relative;
}
.search{
	position: absolute;
	z-index: 1000;
	width: 100%;
	top: 0;
	height: 1.173054rem;
	background-image: linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,0));
}
.search a{
	display: block;
	width: 1.312633rem;
	height: .687366rem;
	background-color: red;
	color: #fff;
	float: left;
	border-top-left-radius: .186567rem;
	position: absolute;
	z-index: 99;
	top: .266524rem;
	left: .319829rem;
	text-align: center;
	line-height: .687366rem;
	font-size: 16px;
	font-weight: 700;
}
.search-box{
	width: 7.724866rem;
	height: .781263rem;
	line-height: .781263rem;
	background: #fff;
	float: right;
	margin-right: .375rem;
	border-radius: .079957rem;
	margin-top: .194696rem;
	color: #999;
}
.iky-search{
	float: left;
	height: .781263rem;
	margin: 0 .1875rem 0 .5rem;
	font-size: .533049rem;
	padding-top: .066631rem;
}
.search-box input{
	width: 6.249999rem;
	height: .73rem;
	border: none;
	color: #999;
	float: left;
	font-size: .426439rem;
}
.img{
	width: 100%;
	height: 100%;
}
.recommend-category{
	padding: 8px;
}
.br{
	border-radius: 5px;
}
.menu-icon>>>.van-grid-item__text{
	text-align: center;
	font-weight: 700;
	font-size: .319829rem;
	line-height: .319829rem;
	width: 100%;
	color: #000000;
}
</style>